<template>
  <div class="info-attr-module">
    <div class="title">赛事报名信息</div>
    <div class="attr-data">
      <div class="item">
        <span>赛事</span>
        <div>{{matchInfo.match_name}}</div>
      </div>
      <div class="item">
        <span>领队</span>
        <div>{{info.team.realName}}</div>
      </div>
      <div class="item">
        <span>比赛时间</span>
        <div>{{matchInfo.matchdate}}</div>
      </div>
      <div class="item">
        <span>报名时间</span>
        <div>{{matchInfo.signdate}}</div>
      </div>
    </div>
    <div class="title">赛项选择</div>

    <div class="data-select">
      <div class="item"
        v-for="(item,index) in matchInfo.detail"
        @click="handleItem(item)"
        :class="item.id == selected.id ? 'active' : 'none'"  :key="index">
        {{item.item_name}}
        <img  src="@/assets/common/icon_select.png" class="icon" />
      </div>
    </div>
    <div class="fixed-btn">
      <div class="btn" @click="handeUrl">立即报名</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import {useRoute, useRouter} from "vue-router";
import baseService from "@/service/baseService";
import {getCache} from "@/utils/cache";
let router = useRouter();
const route = useRoute();
let id = route.query.id;
const state = ref(1);
const selected :any = ref({id:0});
let info =ref({
  haveJinJi:false,
  team:getCache( "CacheToken",{ isSessionStorage: true }, {})['spTeamEntity']
});
const handleItem = (index: any) => {
  selected.value = index;
};
const handeUrl = () => {
  if (selected.value.item_type == 100201) {
    router.push({path:"/match/sign_up_one",query:{id:selected.value.id,matchId:id}});
  } else  {
    router.push({path:"/match/sign_up_team",query:{id:selected.value.id,matchId:id}});
  }
};
const matchInfo = ref( {
  "begindate": "",
  "matchdate": "",
  "detail": [
    {
      "base_match_item_id": "",
      "classname": "",
      "student_num_max": 1,
      "item_type": 100201,
      "match_id": "",
      "item_classify": "",
      "teacher_num": 1,
      "item_name": "",
      "id": "",
      "student_num": 1,
      "typename": "",
      "teacher_num_max": 1
    }
  ],
  "signdate": "",
  "match_name": ""
});
baseService
    .get("/front/fast/match/matchInfo/info", {
      id:id
    })
    .then((res) => {
      console.log(res);
      matchInfo.value= res.data;
      selected.value = matchInfo.value.detail[0];
    });
</script>
<style lang="scss" scoped>
@import "./style.scss";
</style>
